<template>
  <div class="scroll">
    <ul :class="{addscroll}">
      <li v-for="(item,index) in listdata" :key="index" class="text">
        {{item.content}}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  components: {},
  props: {},
  data() {
    return {
      addscroll: false,
      listdata: [
        { id: 1, content: "能让你忘掉马尔代夫的新晋网红海岛——越南·富国岛" },
        {
          id: 2,
          content:
            "一半火山一半大海,藏在家门口的“诗和远方”——连江平流尾地质公园一日游"
        },
        {
          id: 3,
          content:
            "[Kris探秘南非]独自旅行,公共交通玩转南非(视频,克鲁格国家公园,花园大道,开普敦,"
        }
      ]
    };
  },
  methods: {
    scroll() {
      // this.addscroll = false;
      this.addscroll = true;
      setTimeout(() => {
        this.listdata.push(this.listdata[0]);
        this.listdata.shift();
        this.addscroll = false;
      }, 2500);
    }
  },
  mounted() {
    setInterval(this.scroll, 3000);
  }
};
</script>
<style lang="less" scoped>
.scroll {
  background-color: #ffdd40;
  height: 40px;
  font-size: 15px;
  overflow: hidden;
  ul {
    li {
      position: relative;
      padding-left: 10px;
      &::before{
        content: '';
        display: block;
        width: 5px;
        height: 5px;
        background-color: red;
        border-radius: 50%;
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
      }
    }
  }
}
.addscroll {
  transition: all 2.5s;
  margin-top: -20px;
}
.text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>